<template>
<div class="payroll-config-container">
    <!-- 社保配置卡片 -->
    <el-card class="config-card" shadow="never">
      <template #header>
        <span class="card-header">社保方案</span>
      </template>
      <div class="form-section">
        <el-form ref="socialForm" :model="socialFormData" label-width="0">
          <table class="form-table">
            <thead>
              <tr>
                <th>险种名称</th>
                <th>基数下限</th>
                <th>基数上限</th>
                <th>公司比例(%)</th>
                <th>公司固定金额(元)</th>
                <th>个人比例(%)</th>
                <th>个人固定金额(元)</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in socialFormData.items" :key="index">
                <td>
                  <el-form-item>
                    <el-input v-model="item.name" />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.baseMin" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.baseMax" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.companyRate" type="number" :precision="2">
                      <template #append>%</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.companyFixed" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.personalRate" type="number" :precision="2">
                      <template #append>%</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.personalFixed" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-button type="danger" icon="Delete" circle @click="removeSocialItem(index)" />
                </td>
              </tr>
            </tbody>
          </table>

          <div class="action-buttons">
            <el-button type="primary" icon="Plus" @click="addSocialItem">新增险种</el-button>
            <el-button type="warning" @click="resetSocialForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>

    <!-- 公积金配置卡片 -->
    <el-card class="config-card" shadow="never" style="margin-top: 20px;">
      <template #header>
        <span class="card-header">公积金方案</span>
      </template>
       <el-form-item label="公积金方案类型">
 <el-select v-model="housingFormData.schemeType" placeholder="请选择">
 <el-option label="上海公积金8+8" value="shanghai"></el-option>
 <el-option label="北京公积金12%" value="beijing"></el-option>
 <el-option label="自定义方案" value="custom"></el-option>
 </el-select>
 </el-form-item>
      <div class="form-section">
        <el-form ref="housingForm" :model="housingFormData" label-width="0">
          <table class="form-table">
            <thead>
              <tr>
                <th>公积金类型</th>
                <th>基数下限</th>
                <th>基数上限</th>
                <th>公司比例(%)</th>
                <th>公司固定金额(元)</th>
                <th>个人比例(%)</th>
                <th>个人固定金额(元)</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in housingFormData.items" :key="index">
                <td>
                  <el-form-item>
                    <el-input :value="item.type === 'housing' ? '公积金' : '补充公积金'" readonly />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.baseMin" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.baseMax" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.companyRate" type="number" :precision="2">
                      <template #append>%</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.companyFixed" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.personalRate" type="number" :precision="2">
                      <template #append>%</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input v-model.number="item.personalFixed" type="number">
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-button type="danger" icon="Delete" circle @click="removeHousingItem(index)" />
                </td>
              </tr>
            </tbody>
          </table>

          <div class="action-buttons">
            <el-button type="primary" icon="Plus" @click="addHousingItem">新增项目</el-button>
            <el-button type="warning" @click="resetHousingForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>

    <!-- 费用统计卡片 -->
    <el-card class="stats-card" shadow="never" style="margin-top: 20px;">
      <template #header>
        <span class="card-header">费用统计</span>
      </template>
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-label">个人缴费总计：</div>
          <div class="stat-value highlight">{{ totalPersonal | currency }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">企业缴费总计：</div>
          <div class="stat-value highlight">{{ totalCompany | currency }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">全部缴费合计：</div>
          <div class="stat-value highlight">{{ totalAll | currency }}</div>
        </div>
      </div>
    </el-card>

    <!-- 底部操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="saveConfig">保存</el-button>
      <el-button @click="cancelEdit">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';

const socialFormData = ref({
 baseLimit: 0,
 baseLimitMax: 0,
 items: [
 { name: '养老保险', baseMin: 0, baseMax: 0, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 },
 { name: '医疗保险', baseMin: 0, baseMax: 0, companyRate: 10, companyFixed: 0, personalRate: 2, personalFixed: 0 },
 { name: '失业保险', baseMin: 0, baseMax: 0, companyRate: 0.5, companyFixed: 0, personalRate: 0.5, personalFixed: 0 },
 { name: '工伤保险', baseMin: 0, baseMax: 0, companyRate: 0.2, companyFixed: 0, personalRate: 0, personalFixed: 0 },
 { name: '生育保险', baseMin: 0, baseMax: 0, companyRate: 1.5, companyFixed: 0, personalRate: 0, personalFixed: 0 }
 ]
});

const housingFormData = ref({
 schemeType: 'shanghai',
 disabled: false,
 items: [
 { type: 'housing', name: '公积金', baseMin: 5975, baseMax: 31014, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 },
 { type: 'supplement', name: '补充公积金', baseMin: 5975, baseMax: 31014, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 }
 ]
});

// 费用统计
const totalPersonal = computed(() => {
 return calculateTotal(socialFormData.value.items, 'personal') + 
 calculateTotal(housingFormData.value.items, 'personal');
});

const totalCompany = computed(() => {
 return calculateTotal(socialFormData.value.items, 'company') + 
 calculateTotal(housingFormData.value.items, 'company');
});

const totalAll = computed(() => totalPersonal.value + totalCompany.value);

// 格式化金额
const currency = (value) => {
 return value ? `¥${value.toFixed(2)}` : '¥0.00';
};

// 社保计算方法
function calculateTotal(items, type) {
 return items.reduce((sum, item) => {
 const rate = type === 'company' ? item.companyRate : item.personalRate;
 const fixed = type === 'company' ? item.companyFixed : item.personalFixed;
 
 // 计算逻辑：rate优先，其次fixed，最后按比例计算
 if (rate > 0) {
 return sum + (rate / 100 * (item.baseMax + item.baseMin) / 2);
 } else if (fixed > 0) {
 return sum + fixed * 2; // 假设上下限相同
 } else {
 return sum + ((item.baseMax + item.baseMin) / 2);
 }
 }, 0);
}

// 保存配置
const saveConfig = () => {
 // 这里添加保存逻辑
 ElMessage.success('配置已保存！');
};

// 取消编辑
const cancelEdit = () => {
 // 这里添加取消逻辑
};

// 新增/删除方法
const addSocialItem = () => {
 socialFormData.value.items.push({
 name: '',
 baseMin: 0,
 baseMax: 0,
 companyRate: 0,
 companyFixed: 0,
 personalRate: 0,
 personalFixed: 0
 });
};

const removeSocialItem = (index) => {
 socialFormData.value.items.splice(index, 1);
};

const addHousingItem = () => {
 housingFormData.value.items.push({
 type: 'housing',
 name: '',
 baseMin: 0,
 baseMax: 0,
 companyRate: 0,
 companyFixed: 0,
 personalRate: 0,
 personalFixed: 0
 });
};

const removeHousingItem = (index) => {
 housingFormData.value.items.splice(index, 1);
};

// 重置表单
const resetSocialForm = () => {
 socialFormData.value = {
 baseLimit: 0,
 baseLimitMax: 0,
 items: [
 { name: '养老保险', baseMin: 0, baseMax: 0, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 },
 { name: '医疗保险', baseMin: 0, baseMax: 0, companyRate: 10, companyFixed: 0, personalRate: 2, personalFixed: 0 },
 { name: '失业保险', baseMin: 0, baseMax: 0, companyRate: 0.5, companyFixed: 0, personalRate: 0.5, personalFixed: 0 },
 { name: '工伤保险', baseMin: 0, baseMax: 0, companyRate: 0.2, companyFixed: 0, personalRate: 0, personalFixed: 0 },
 { name: '生育保险', baseMin: 0, baseMax: 0, companyRate: 1.5, companyFixed: 0, personalRate: 0, personalFixed: 0 }
 ]
 };
};

const resetHousingForm = () => {
 housingFormData.value = {
 schemeType: 'shanghai',
 disabled: false,
 items: [
 { type: 'housing', name: '公积金', baseMin: 5975, baseMax: 31014, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 },
 { type: 'supplement', name: '补充公积金', baseMin: 5975, baseMax: 31014, companyRate: 16, companyFixed: 0, personalRate: 8, personalFixed: 0 }
 ]
 };
};
</script>

<style scoped>
.payroll-config-container {
 padding: 20px;
}

.config-card {
 margin-bottom: 20px;
}

.card-header {
 font-size: 18px;
 font-weight: bold;
 color: #409EFF;
}

.form-section {
 padding: 20px;
}

.item-row {
 display: flex;
 align-items: center;
 margin-bottom: 15px;
}

.item-row :deep(.el-form-item) {
 margin-bottom: 0;
}

.item-row :deep(.el-form-item__content) {
 margin-left: 0 !important;
}

.action-buttons {
 display: flex;
 justify-content: space-between;
 margin-top: 20px;
}

.stats-card {
 flex: 1;
}

.stats-container {
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.stat-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 20px;
 background-color: #f5f7fa;
 border-radius: 4px;
}

.stat-label {
 color: #606266;
}

.highlight {
 color: #409EFF;
 font-weight: bold;
}

.action-bar {
 display: flex;
 justify-content: space-between;
 padding: 15px;
 background-color: #f9fafc;
 border-top: 1px solid #e4e7ed;
}
.payroll-config-container {
  padding: 20px;
  max-width: 80%; /* 限制容器最大宽度为80% */
  margin: 0 auto; /* 水平居中 */
}

.config-card {
  margin-bottom: 20px;
}

.item-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: nowrap; /* 禁止换行 */
}

/* 优化列布局 */
.el-col {
  flex: 0 0 auto; /* 禁止列元素缩放 */
}

/* 调整按钮栏布局 */
.action-buttons,
.action-bar {
  justify-content: flex-start; /* 按钮左对齐减少右侧空白 */
  gap: 10px; /* 增加按钮间距 */
}

/* 优化统计卡片布局 */
.stats-container {
  max-width: 100%; /* 确保统计卡片不超出容器 */
}
.form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.form-table th,
.form-table td {
  border: 1px solid #EBEEF5;
  padding: 10px;
  text-align: left;
}

.form-table th {
  background-color: #F5F7FA;
  font-weight: 500;
}

.form-table td {
  vertical-align: middle;
}

/* 表单元素在表格中的样式 */
.form-table .el-form-item {
  margin-bottom: 0;
}

.form-table .el-input,
.form-table .el-select {
  width: 100%;
}

/* 操作按钮样式 */
.form-table .el-button {
  padding: 5px;
}

/* 其他样式保持不变 */
.payroll-config-container {
  padding: 20px;
  max-width: 1200px; /* 限制最大宽度 */
  margin: 0 auto;
}

.config-card {
  margin-bottom: 20px;
}

.action-buttons,
.action-bar {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.stats-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.stat-label {
  color: #606266;
}

.highlight {
  color: #409EFF;
  font-weight: bold;
}
</style>